* {
    margin: 0;
    padding: 0;
    outline: none;
    box-sizing: border-box;
}

body {
    display: flex;
    /* ctr + enter 快速跳到下一行 */
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    /* 渐变 */
    background: linear-gradient(200deg, #CC95C0, #DBD4B4, #C06C84);
    /* background-image: radial-gradient(circle, #56e2e7, #2dcae4, #18b1dd, #2c97d0, #457cbd,
            #4e77ba, #5772b7, #606cb3, #627cc5, #628bd8, #619cea, #5facfb); */

}

.wrapperdiv {
    width: 450px;
    background-color: #fff;
    /* 内边距 */
    padding: 40px;
    /* 盒子阴影 */
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
    /* 圆角 */
    border-radius: 8px;
}

.wrapperdiv .input-datadiv {
    width: 100%;
    height: 40px;
    position: relative;
}

.wrapperdiv .input-datadiv input {
    width: 100%;
    height: 100%;
    border: none;
    font-size: 19px;
    border-bottom: 2px solid #c0c0c0;
}

/* 输入框获得焦点时 */
.wrapperdiv .input-datadiv input:focus~label,
/* 输入框的值合法时 */
.wrapperdiv .input-datadiv input:valid~label {
    transform: translateY(-25px);
    font-size: 15px;
    color: #2c6fdb;
}

.wrapperdiv .input-datadiv input:focus{
    border-bottom-color: #2c6fdb;
}

.wrapperdiv .input-datadiv label {
    position: absolute;
    bottom: 10px;
    left: 0px;
    color: #808080;
    /* 这个属性可以使点击label穿透到输入框 */
    pointer-events: none;
    /* 给动画一个过渡 */
    transition: all 0.3s ease;

}

.wrapperdiv .input-datadiv .underlinediv {
    position: absolute;
    bottom: 0px;
    height: 2px;
    width: 100%;
    background-color: #2c6fdb;
    transform: scaleX(0);
    transition: all 0.3s ease;

}

.wrapperdiv .input-datadiv input :focus~.underlinediv,
.wrapperdiv .input-datadiv .input :focus~.underlinediv {
    transform: scaleX(1);

}